<!DOCTYPE html>
<html>
<head>
  <title>regl-gpu-lines Example</title>
  <meta charset='utf-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/javascript.min.js"></script>
</head>
<body>
<script src="https://unpkg.com/controls-state@2.0.0/dist/controls-state.min.js"></script>
<script src="https://unpkg.com/controls-gui@2.0.0/dist/controls-gui.min.js"></script>
<script src="https://unpkg.com/regl@2.1.0/dist/regl.js"></script>
<script src="https://unpkg.com/regl-gpu-lines@latest"></script>
<script src="https://unpkg.com/gl-matrix@3.4.3/gl-matrix-min.js"></script>

<script>
const regl = createREGL({extensions: ['ANGLE_instanced_arrays']});

const drawLines = reglLines(regl, {
  vert: `
    precision highp float;

    #pragma lines: attribute vec2 xy;
    #pragma lines: position = getPosition(xy);
    #pragma lines: width = getWidth(xy);

    uniform vec2 aspect;

    vec4 getPosition(vec2 xy) { return vec4(xy * aspect, 0, 1); }
    float getWidth(vec2 xy) { return 50.0; }
    `,
  frag: `
    precision lowp float;
    void main () {
      gl_FragColor = vec4(vec3(1), 0.5);
    }`,
  uniforms: {
    aspect: ctx => [1, ctx.framebufferWidth / ctx.framebufferHeight]
  },
  blend: {
    enable: true,
    func: {
      srcRGB: 'src alpha',
      srcAlpha: 1,
      dstRGB: 'one minus src alpha',
      dstAlpha: 1
    }
  },
  depth: {
    enable: false
  }
});

// A seven-sided star
const n = 7;

// Except we repeat the first three vertices again at the end. This
// results in a closed shape with correct joins.
const xy = [...Array(n + 3).keys()]
  .map(i => i / n)
  .map(t => {
    const theta = t * Math.PI * 2 * 2;
    const r = 0.7;
    return [
      r * Math.cos(theta),
      r * Math.sin(theta)
    ];
  });

// Exclude endpointAttributes since there are no end caps to draw in
// this case.
const lineData = {
  join: 'round',
  vertexCount: xy.length,
  vertexAttributes: {
    xy: regl.buffer(xy)
  },
};

function draw () {
  regl.poll();
  regl.clear({color: [0.2, 0.2, 0.2, 1]});
  drawLines(lineData);
}

draw();
window.addEventListener('resize', draw);

</script>
<style>
#code-container {
  font-family: sans-serif;
  position: absolute;
  left: 0;
  z-index: 10;
  max-height: 90%;
  overflow: auto;
  background-color: white;
}
#code-container summary {
  padding: 15px;
  cursor: pointer;
}
</style>
<div id="code-container">
<details>
<summary>Code</summary>
<pre><code id="code">
const regl = createREGL({extensions: ['ANGLE_instanced_arrays']});

const drawLines = reglLines(regl, {
  vert: `
    precision highp float;

    #pragma lines: attribute vec2 xy;
    #pragma lines: position = getPosition(xy);
    #pragma lines: width = getWidth(xy);

    uniform vec2 aspect;

    vec4 getPosition(vec2 xy) { return vec4(xy * aspect, 0, 1); }
    float getWidth(vec2 xy) { return 50.0; }
    `,
  frag: `
    precision lowp float;
    void main () {
      gl_FragColor = vec4(vec3(1), 0.5);
    }`,
  uniforms: {
    aspect: ctx => [1, ctx.framebufferWidth / ctx.framebufferHeight]
  },
  blend: {
    enable: true,
    func: {
      srcRGB: 'src alpha',
      srcAlpha: 1,
      dstRGB: 'one minus src alpha',
      dstAlpha: 1
    }
  },
  depth: {
    enable: false
  }
});

// A seven-sided star
const n = 7;

// Except we repeat the first three vertices again at the end. This
// results in a closed shape with correct joins.
const xy = [...Array(n + 3).keys()]
  .map(i => i / n)
  .map(t => {
    const theta = t * Math.PI * 2 * 2;
    const r = 0.7;
    return [
      r * Math.cos(theta),
      r * Math.sin(theta)
    ];
  });

// Exclude endpointAttributes since there are no end caps to draw in
// this case.
const lineData = {
  join: 'round',
  vertexCount: xy.length,
  vertexAttributes: {
    xy: regl.buffer(xy)
  },
};

function draw () {
  regl.poll();
  regl.clear({color: [0.2, 0.2, 0.2, 1]});
  drawLines(lineData);
}

draw();
window.addEventListener('resize', draw);

</code></pre>
</details>
</div>
<script>
const code = document.getElementById('code');
hljs.highlightElement(code);
</script>
</body>
</html>
